<template>
    <div>
        <a href="javascript:;" class="switch1 switch switchnav"><span>Menu</span><i><em></em></i></a>
        <div class="menu_mask mask"></div>
        <div class="Menu_nav">
            <div class="Menu_logo" v-if="menulistconfig"><img src="../assets/images/logo_a.svg" class="white"><span
                class="t">{{menulistconfig[0].name}}</span></div>
            <!-- <a href="javascript:;" class="switch switchnav">Menu</a>-->
            <div class="box">
                <ul class="ul Menu_navul fl-clr">
                    <li v-for="(item,index) in menulist.menu_list" :key="index">
                        <router-link
                            v-if="!item.son||item.id==1||item.id==25||item.id==2||item.id==3||item.id==4||item.id==56||item.id==7"
                            :to="{name: item.source}" :class="$route.path.indexOf(item.source)>0?'gon':''" class="a url"
                            exact>{{item.name}}
                        </router-link>
                        <nav v-else-if="index!=8" :class="$route.path.indexOf(item.source)>0?'on':''"><!---->
                            <a href="javascript:;" class="a">{{item.name}}<em><i></i><i></i></em></a>
                            <div class="drop-down">
                                <p v-for="(items,indexs) in item.son" :key="indexs">
                                    <router-link :to="{name: items.source , params: { cid: items.id }}" class="url">
                                        {{items.name}}
                                    </router-link>
                                </p>
                            </div>
                        </nav>
                    </li>
                </ul>
            </div>
            <canvas id="navBg" class="navBg"></canvas>
        </div>

    </div>
</template>

<style lang="scss">
</style>

<script>
import {gsap, Quart} from "gsap";

export default {
    name: 'Menu',
    computed: {
        menulist () {
            return this.$store.getters.getmenulist;
        },
        menulistconfig () {
            return this.$store.getters.getmenuconfig
        }
    },

    mounted () {
        let transDuration = 1.5;
        let Tween = gsap;
        let DM = { aniMultiplier: 1 }
        let navTop = { x: 0 };
        let nav = { x: 0 };
        let canvas = document.getElementById("navBg");
        let context = canvas.getContext("2d");
        let tl;
        let is_show = false;
        //导航相关
        $(document).on('click', '.Menu_navul li', function () {
            if ($(this).find(".drop-down").length > 0) {
                if ($(this).hasClass('on')) {
                    $(this).removeClass("on")
                    $(this).find(".drop-down").slideUp()
                } else {
                    $(this).addClass("on")
                    $(this).find(".drop-down").slideDown()
                    $(this).siblings().find(".drop-down").slideUp()
                    $(this).siblings().removeClass("on")
                }
            }
            //hideNav();
        })
        $(document).on('click', '.Menu_navul li .url', function () {
            hideNav()
        })
        document.querySelector('.Menu_navul').addEventListener('touchstart',function(e){
                e.stopPropagation();
            },{passive:false})

        $(document).on('click touchstart', '.switchnav', function () {
            $('.Menu_contact,.mask_i').removeClass('active')
            if ($('.switchnav').hasClass('on')) {
                if (is_show === true) {
                    hideNav();
                }
            } else {
                if (is_show === false) {
                    showNav();
                    let gactive = $('.Menu_navul li .drop-down .url').hasClass('router-link-exact-active') ? $('.Menu_navul li .drop-down  .router-link-exact-active') : '';
                    if ($('.Menu_navul li .drop-down .url').hasClass('router-link-active')) {
                        gactive = $('.Menu_navul li .drop-down .router-link-active')
                    }
                    if (gactive) {
                        gactive.parent().parent().slideDown()
                        gactive.parent().parent().parent().parent().addClass("on")
                    } else {
                        $('.Menu_navul li .drop-down .url').parent().parent().slideUp()
                        $('.Menu_navul li .drop-down .url').parent().parent().parent().parent().removeClass("on")
                    }
                }
            }
        });
        $(document).on('click', '.menu_mask', function () {
            hideNav();
        })

        function showNav () {
            Tween.fromTo('.menu_mask', 1, { autoAlpha: 0 }, { autoAlpha: 1, })
            $('.switchnav').addClass('on cursor_close')
            $('.switchnav span').text('Close')
            $('.Menu_nav,.mask_i,.menu_mask').addClass('active')
            Tween.fromTo('.Menu_nav', { autoAlpha: 0, }, { autoAlpha: 1 })
            Tween.fromTo('.Menu_nav .box', .65 * transDuration, { autoAlpha: 0 }, {
                autoAlpha: 1,
            })


            var aniSpeed = 0.2 * DM.aniMultiplier;

            tl = gsap.timeline({})

            tl.fromTo(nav, { x: 0 },
                {
                    x: 320, ease: Quart.easeInOut, delay: 0,
                    duration: aniSpeed,
                    onComplete: function () {
                        is_show = true;
                    }
                }, 'a').fromTo(navTop, { x: 0 },
                {
                    x: 500, ease: Quart.easeInOut,
                    delay: 0,
                    duration: aniSpeed * 2.2,
                    onUpdate: $.proxy(animateNavBg, this)
                }, 'a')
        }

        function hideNav () {
            Tween.fromTo('.menu_mask', 1, { autoAlpha: 1 }, { autoAlpha: 0, })
            var aniSpeed = 1.2 * DM.aniMultiplier;
            tl.timeScale(aniSpeed);
            tl.reverse();


            $('.switchnav').removeClass('on')
            $('.switchnav span').text('Menu')
            $('.switchnav').removeClass('cursor_close')
            $('.mask_i').removeClass('active')
            Tween.fromTo('.Menu_nav', { autoAlpha: 1, }, { autoAlpha: 0, delay: 0.5 })
            Tween.fromTo('.Menu_nav .box', .65 * transDuration, { alpha: 1 }, {
                alpha: 0,
                onComplete: function () {
                    is_show = false
                }
            })
        }

        function animateNavBg () {
            var newH = $(window).height();
            canvas.width = 600;
            canvas.height = newH;
            context.fillStyle = "#222222";
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(navTop.x, 0);
            context.lineTo(nav.x, newH);
            context.lineTo(0, newH);
            context.closePath();
            context.fill();
        }
    }
}
</script>
